import React from 'react'
import { Redirect,Switch,Route } from 'react-router-dom';
import { Layout } from 'antd'
import { connect } from 'react-redux';

import Home from '../Home/Home'
import Category from '../Category/Category'
import Product from '../Product/Product'
import Detail from '../Product/Detail/Detail'
import AddAndModifyProduct from '../Product/AddProduct/AddAndModifyProduct'
import User from '../User/User'
import Role from '../Role/Role'
import Bar from '../Charts/Bar'
import Line from '../Charts/Line'
import Pie from '../Charts/Pie'
import NotFound from '../NotFound/NotFound'

import LeftNav from '../../components/LeftNav/LeftNav'
import MyHeader from '../../components/Header/Header'
import MyFooter from '../../components/Footer/Footer'
import MyContent from '../../components/Content/Content'

import './Admin.css'

const { Sider }=Layout

export default connect(state=>({user:state.user}),{})(function Admin(props) {
  const { user }=props

  if(!user._id){
    return <Redirect to="/login"/>
  }
  return (
    <div className="admin">
      <Layout style={{height:'100%'}}>
      <Sider> <LeftNav/> </Sider>
      <Layout>
        <MyHeader user={user}/>
        <MyContent>
          <Switch>
            <Route path='/home' component={Home}></Route>
            <Route path='/category' component={Category}></Route>
            <Route path='/product' exact component={Product}></Route>
            <Route path='/product/detail' component={Detail}></Route>
            <Route path='/product/addAndModify' component={AddAndModifyProduct}></Route>
            <Route path='/user' component={User}></Route>
            <Route path='/role' component={Role}></Route>
            <Route path='/charts/bar' component={Bar}></Route>
            <Route path='/charts/line' component={Line}></Route>
            <Route path='/charts/pie' component={Pie}></Route>
            <Route path='/404' component={NotFound}></Route>
            <Redirect to="/404"></Redirect>
          </Switch>
        </MyContent>
        <MyFooter/>
      </Layout>
    </Layout>
    </div>
  )
})
